<template>
  <el-dialog
    ref="commentDialogRef"
    :visible="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :before-close="handleClose"
    :class="{'mobile-el-dialog':showMobilePage}"
    modal-append-to-body
    class="small-common-dialog-size"
  >
    <!-- 滚动效果 -->
    <el-progress :percentage="percent" :show-text="false" color="#406EFF" type="circle" class="center"/>
    <div class="marquee-wrap center">
      <ul :class="{'animate-up': animateUp}" class="marquee-list">
        <li v-for="(item, index) in handleData" :key="index" :class="`item-${index}`">{{ item }}</li>
      </ul>
    </div>
    <div class="tip">
      <p class="number">{{ `${successAccountNum}/${total}` }}</p>
      <p>一键智能发起结算中，请勿关闭页面..</p>
      <p class="text">关闭页面后任务仍继续执行</p>
    </div>
  </el-dialog>
</template>

<script>
import SelectCustomUser from '@/views/legal/process/model/selectCustomUser';
import upAttachment from '@/components/Common/upAttachment/index';
import DialogTitle from '@/components/Title';
import { mapState } from 'vuex';

export default {
  name: 'CommentDialog',
  components: {
    SelectCustomUser,
    upAttachment,
    DialogTitle
  },
  props: {
    batchSettleInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      animateUp: false,
      timer: null,
      listData: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    successAccountNum() {
      return this.batchSettleInfo.successAccountNum ? this.batchSettleInfo.successAccountNum : 0;
    },
    failAccountNum() {
      return this.batchSettleInfo.failAccountNum ? this.batchSettleInfo.failAccountNum : 0;
    },
    total() {
      return this.batchSettleInfo.total ? this.batchSettleInfo.total : 0;
    },
    handleData() {
      return this.listData.slice(0, 3);
    },
    percent() {
      return Math.floor((this.successAccountNum + this.failAccountNum) / this.total * 100);
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    openDialog(names = '', total) {
      if (total > 2) {
        this.timer = setInterval(this.scrollAnimate, 550);
      }
      this.listData = names.split(',');
      this.dialogVisible = true;
    },
    handleSubmit() {
      this.$emit('handleSubmit', this.settleType);
      this.handleClose();
    },
    scrollAnimate() {
      this.animateUp = true;
      setTimeout(() => {
        this.listData.push(this.listData[0]);
        this.listData.shift();
        this.animateUp = false;
      }, 500);
    },
    handleClose() {
      this.dialogVisible = false;
      this.settleType = 1;
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped lang="scss">
.small-common-dialog-size {
  ::v-deep .el-dialog {
    height: 300px !important;
  }
}
.marquee-wrap  {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0;
  overflow: hidden;
  .marquee-list {
    padding: 0;
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      list-style: none;
      line-height: 20px;
      text-align: center;
      color: #406EFF;
      font-size: 12px;
    }
  }
  .animate-up {
    .item-0 {
      transition: all .3s ease-in-out;
      transform: translateY(60px);
      opacity: 0.2;
    }
    .item-1 {
      transform: translateZ(-30px);
      opacity: .5;
      font-size: 12px;
      font-weight: normal;
      transition: all .4s ease-in-out;
    }
    .item-2 {
      font-size: 14px !important;
      font-weight: bold;
      transition: all .3s ease-in-out;
    }
    transition: all .3s ease-in-out;
    transform: translateY(-20px);
  }
  .item-1 {
    font-size: 14px !important;
    font-weight: bold;
  }
  .item-0, .item-2 {
    transform: translateZ(-30px);
    opacity: .5;
  }
  .item-2 {
    transform: translateZ(30px);
  }
}
.tip {
 margin-top: 170px;
 p {
  width: 100%;
  text-align: center;
  font-size: 12px;
 }
 .text {
  margin-top: 16px;
 }
 .number {
  color: #406EFF;
  font-size: 14px;
 }
}
.center {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
